<template>
  <div class="dashboard">
    <div class="mt-10">
      <n-grid x-gap="12" cols="2 s:3 m:4" responsive="screen">
        <n-gi v-for="(item, index) in blockList" :key="index">
          <GridBlock :title="item.title" :icon="item.icon" :count="item.count" />
        </n-gi>
      </n-grid>
    </div>
    <div class="mt-10">
      <n-grid :x-gap="12" :y-gap="8" cols="5">
        <n-gi span="2">
          <n-card title="标签文章数量">
            <EchartsPieChart :data="EchartsPieChartList" />
          </n-card>
        </n-gi>
        <n-gi span="3">
          <n-card title="文章访问量Top5">
            <EchartsBarChart :data="EchartsBarChartList" />
          </n-card>
        </n-gi>
      </n-grid>
    </div>
    <div class="mt-10">
      <n-grid :x-gap="12" :y-gap="8" cols="4">
        <n-gi span="2">
          <n-card title="最近文章">
            <GridBlockPost :list="postList" />
          </n-card>
        </n-gi>
        <n-gi span="2">
          <n-card title="最近评论">
            <GridBlockComments :list="commentsList" />
          </n-card>
        </n-gi>
      </n-grid>
    </div>
  </div>
</template>

<script setup lang="ts">
import { NGrid, NGi, NIcon, NCard } from "naive-ui";
import { DashboardOutlined, TagsOutlined } from "@vicons/antd";
import { ArticleSharp, InsertCommentSharp, LabelTwotone, ClassSharp } from "@vicons/material";
import { getRelation as apiTagsGetRelation } from "../../api/tag";
import { findInfo as apiSiteGetInfo } from "../../api/site";
import { findAll as apiPostFindAll, type PostQueryFind } from "../../api/post";
import md5 from "md5";
import {
  StatusComment,
  findAll as apiCommentsFindAll,
} from "../../api/comments";
useHead({
  title: "控制台", //网站标题
});
definePageMeta({
  title: "控制台",
});
const EchartsPieChartList = ref<{ id: number; name: string; value: number }[]>(
  []
);
const EchartsBarChartList = ref<{ id: string; name: string; value: number }[]>(
  []
);
function renderIcon(icon: Component) {
  return () => h(NIcon, null, { default: () => h(icon) });
}
const postList = ref<{ title: string; text: string }[]>([]);
const commentsList = ref<
  {
    title: string;
    text: string;
    imageSrc: string;
  }[]
>([]);
const getTags = async () => {
  const res = await apiTagsGetRelation();
  EchartsPieChartList.value = res.data;
};
const blockList = ref<{ title: string; icon: Function; count: number }[]>([]);
const getInfoSite = async () => {
  // 饼图数据获取
  const res = await apiSiteGetInfo();
  if (res) {
    const { categoryCount, commentCount, postsCount, tagCount } = res.data;
    blockList.value.push({
      title: "文章数",
      icon: renderIcon(ArticleSharp),
      count: postsCount,
    });
    blockList.value.push({
      title: "评论数",
      icon: renderIcon(InsertCommentSharp),
      count: commentCount,
    });
    blockList.value.push({
      title: "标签数",
      icon: renderIcon(LabelTwotone),
      count: tagCount,
    });
    blockList.value.push({
      title: "分类数",
      icon: renderIcon(ClassSharp),
      count: categoryCount,
    });
  }
};
// 访问前五的位置
const getPostInfo = async () => {
  const res = await apiPostFindAll({
    pageSize: 5,
    status: "publish",
    sortBy: { count: "DESC" },
  });
  if (res.data) {
    const list: { id: string; name: string; value: number }[] = [];
    res.data.list.forEach((item) => {
      list.push({
        id: item.id,
        name: item.title,
        value: item.count,
      });
    });
    EchartsBarChartList.value = list;
  }
};
// 获取最近创建的5个文章
const dayjs = useDayjs();
const getPostCreate = async () => {
  const res = await apiPostFindAll({
    pageSize: 5,
    status: "publish",
    sortBy: { createTime: "DESC" },
  });

  if (res.data) {
    const list: { title: string; text: string }[] = [];
    res.data.list.forEach((item) => {
      list.push({
        title: item.title,
        text: dayjs(item.createTime).format("YYYY年MM月DD日"),
      });
    });
    postList.value = list;
  }
};
const getComments = async () => {
  const res = await apiCommentsFindAll({
    pageSize: 5,
    status: StatusComment.Pass,
    sortBy: { createTime: "DESC" },
  });
  if (res.data) {
    const list = [];
    res.data.list.forEach((item) => {
      list.push({
        title: item.content,
        text: item.content,
        imageSrc: handleAvatar(item.email),
      });
    });
  }
};

const handleAvatar = (email: string): string => {
  if (/@qq.com/.test(email)) {
    return `https://q1.qlogo.cn/g?b=qq&nk=${email.split("@")[0]}&s=100`;
  } else {
    return `https://gravatar.loli.net/avatar/${md5(email)}?s=52&d=retro`;
  }
};
onMounted(() => {
  getTags();
  getInfoSite();
  getPostInfo();
  getPostCreate();
  getComments();
});
</script>
<style lang="scss" scoped></style>
